<template>
  <div class="remarks-style">
    <t-image-viewer v-model:visible="ImgVisible" :images="[getLinkUrl(ImgUrl)]"> </t-image-viewer>

    <div class="close-box" @click="close">
      <i class="doorIcon">&#xe63d;</i>
    </div>
    <div
      class="remarks-style-conetnt"
      :style="{ backgroundImage: `url(${publicUrls + 'free/style16/scrollBcakground.webp'})` }"
    >
      <div class="exhibits-name">{{ Exinfo.name }}</div>
      <ScrollBox
        color="rgba(50, 43, 37, 1)"
        v-if="Scrollheights && store.exhibitsInfoShow"
        :byid="200"
        :height="getScrollWComputed"
        :topFlag="flag"
        :scroll-src="publicUrls + 'free/style16/scrollBar.webp'"
      >
        <template #solidBorderCon>
          <exhibitsTop @addExId="selectInit" :info="Exinfo" @view-img="viewImg" />

          <!-- 展品描述 -->
          <div class="exhibits-describe" v-if="(Exinfo.audio && Exinfo.audio.url) || Exinfo.description">
            <div class="jointly-title"><div>展品描述</div></div>
            <div class="audeo-parent" v-if="Exinfo.audio && Exinfo.audio.url">
              <playAudio
                v-if="!store.isMobileType"
                :descriptionColor="'rgba(244, 240, 236, 1)'"
                :playColor="'rgba(207, 197, 185, 1)'"
                :timeColor="'rgba(0, 0, 0, 0.38)'"
                :iconColor="'rgba(244, 240, 236, 1)'"
                :nameColor="'rgba(190, 169, 142, 1)'"
                :background="'rgba(244, 240, 236, 1)'"
                :name="Exinfo.audio.name"
                :url="Exinfo.audio.url"
                :description="Exinfo.audio.description"
              />
              <wapPlayAudio
                v-else
                :descriptionColor="'rgba(244, 240, 236, 1)'"
                :playColor="'rgba(207, 197, 185, 1)'"
                :timeColor="'rgba(0, 0, 0, 0.38)'"
                :iconColor="'rgba(244, 240, 236, 1)'"
                :nameColor="'rgba(190, 169, 142, 1)'"
                :background="'rgba(244, 240, 236, 1)'"
                :name="Exinfo.audio.name"
                :url="Exinfo.audio.url"
                :description="Exinfo.audio.description"
              />
            </div>
            <div class="description-text" v-if="Exinfo.description" v-html="Exinfo.description"></div>
          </div>
          <!-- 相关展品 -->
          <div class="beExhibits" v-if="moduleExhibits?.length !== 0">
            <div class="jointly-title"><div>相关展品</div></div>
            <div class="ExList">
              <div
                class="ExBox"
                ref="ExBox"
                v-for="(item, index) in moduleExhibits"
                :key="index"
                @click="ExList(item?.id)"
              >
                <div class="cover-img">
                  <img :src="$filters.getLinkUrl(item?.coverUrl, '?imageView2/3/w/560/format/webp')" alt="" />
                </div>
                <div class="Extitle">
                  {{ item?.name }}
                </div>
                <!-- <div class="line" v-if="!store.isMobileType"></div> -->
              </div>
            </div>
          </div>
        </template>
        <template #solidBorderEx>
          <div class="solidBorder-child"></div>
        </template>
      </ScrollBox>
    </div>
  </div>
  <div class="select-box">
    <!-- placement="center" -->
    <t-dialog
      header="添加展品至展览"
      :visible="visibleStep"
      :confirm-on-enter="true"
      :on-cancel="closetables"
      :on-close="closetables"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #body>
        <t-row :gutter="16" style="width: 100%">
          <t-col :span="12">
            <div class="hw-dialog-box">
              <span class="titles">请选择展览:</span>
              <div class="hw-dialog-box-select">
                <t-select v-model="projectId" placeholder="请选择展览">
                  <t-option :key="item.id" :label="item.name" :value="item.id" v-for="item in selectInitList" />
                </t-select>
              </div>
            </div>
          </t-col>
        </t-row>
      </template>
      <template #footer>
        <t-button @click="visibleStep = false" theme="default" variant="outline">取消</t-button>
        <t-button @click="okStep">确定</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script lang="ts" >
// @ts-nocheck
export default {
  name: 'style16',
};
</script>
 
<script setup lang="ts">
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import { addExhibits } from '@/api/desgin/desgin';
import { getHeardToken } from '@/api/utils';
import { projectLists } from '@/api/project/project';
import { urls, getLinkUrl } from '@/utils/request/upload';
import { showToast, showImagePreview } from 'vant';
import exhibitsTop from './component/exhibitsTop.vue';
import playAudio from './component/audio.vue';
import wapPlayAudio from './component/audiowap.vue';
import { publicUrls } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { reactive, ref, watch, computed } from 'vue';
import { exhibitShowpiece } from '@/api/templates/templates';
import { moduleShowpieces } from '@/api/desgin/desgin';
import ScrollBox from '../scrollBox.vue';
import { useRouter } from 'vue-router';

const emits = defineEmits(['viewImg']);
const store = useProjectStore();
const router = useRouter();
const Exinfo = ref({}) as any;
const Scrollheights = ref();
const moduleExhibits = ref([]);
const selectInitList = ref();
const flag = ref(false);
const ImgUrl = ref('');
const WaplookList = ref([]);
const showpieceid = ref(store.exhibitsShowpieceid); // 选中展品的id
const ImgVisible = ref(false);
const projectId = ref(null);
const visibleStep = ref(false);
const loading = ref(false);
const parmas = reactive({
  pageSize: 999,
  pageNo: 1,
  id: store.exhibitsModuleId, // 展览id
  value: '',
  projectId: localStorage.getItem('projectId'),
});

const props = defineProps({
  info: {
    type: Object,
  },
  list: {
    type: Object,
  },
});

let viewportHeight = window.innerHeight;
Scrollheights.value = viewportHeight * 480;
const getScrollWComputed = computed(() => {
  let rootNode = document.documentElement;

  // 获取计算后的样式
  let computedStyle = window.getComputedStyle(rootNode);

  // 读取字体大小（注意这里返回的可能是一个包含单位的字符串，如"16px"）
  let fontSize = computedStyle.fontSize;

  // 如果你需要一个数字值（不带单位）进行计算，你可能需要解析这个字符串
  // 例如，使用正则表达式或split()方法去除单位，并将结果转换为数字
  let fontSizeNumber = parseFloat(fontSize.replace(/[^0-9.-]/g, ''));
  let heights = (fontSizeNumber / 144) * 480;
  return heights;
});
const close = () => {
  store.exhibitsInfoShow = false;
};

const init = async () => {
  // 获取选中展品
  let { data } = await exhibitShowpiece(parmas.id, showpieceid.value);
  Exinfo.value = data;
  console.log(Exinfo.value, '123');
  // 获取单元所有展品
  let res = await moduleShowpieces(parmas);
  WaplookList.value = [];
  moduleExhibits.value = res.data.data;
  // if (getId() == 615265577537605) {
  //   if (Exinfo.value.images.length === 0) {
  //     Exinfo.value.images.unshift({
  //       data: Exinfo.value.coverUrl,
  //       type: -1,
  //     });
  //   }
  // } else {
  //   Exinfo.value.images.unshift({
  //     data: Exinfo.value.coverUrl,
  //     type: -1,
  //   });
  // }
  Exinfo.value.images.unshift({
    data: Exinfo.value.coverUrl,
    type: -1,
  });

  Exinfo.value.images.forEach((element) => {
    let url = getLinkUrl(element.data);
    WaplookList.value.push(url);
  });
  // console.log(moduleExhibits.value, '123');
};
init();
const getId = () => {
  const url = window.location.href;
  const regex = /\/(\d+)/; // 匹配数字参数的正则表达式
  const match = url.match(regex); // 使用正则表达式匹配数字参数

  if (match) {
    const numericParam = parseInt(match[1]); // 提取数字参数并将其转换为数字类型
    // alert(numericParam);
    // console.log(numericParam); // 输出数字参数的值
    localStorage.setItem('projectId', String(numericParam));
    templateId.value = numericParam;
    return numericParam;
  } else {
    // window.location.href = doorUrl;
  }
};
const ExList = (id: number) => {
  showpieceid.value = id;
  parmas.id = store.exhibitsModuleId;
  flag.value = !flag.value;
  setTimeout(() => {
    init();
  }, 0);
};

const viewImg = (url: string, indexs?: number) => {
  if (store.isMobileType) {
    ImgUrl.value = getLinkUrl(url);
    // showImagePreview({
    //   showIndex: WaplookList.value.length > 1 ? true : false,
    //   startPosition: indexs ? indexs : 0,
    //   images: WaplookList.value,
    //   onClose() {
    //     // showToast('关闭');
    //   },
    // });
    emits('viewImg', WaplookList.value, indexs ? indexs : 0);
  } else {
    ImgUrl.value = url;
    ImgVisible.value = true;
  }
};
const selectInit = async () => {
  try {
    let res = await projectLists(props.info.id);
    if (res.data.length > 0) {
      selectInitList.value = res.data;
      visibleStep.value = true;
      // console.log(selectInitList.value);
    } else MessagePlugin.warning('暂无可添加的展览');
  } catch (err) {
    console.log(err);
  }
};
const addId = () => {
  let token = getHeardToken();
  if (!token) {
    // ElMessageBox.alert('是否前往登录？', '您暂未登录', {
    //   confirmButtonText: '确定',
    //   callback: (action: Action) => {
    //     if (action === 'confirm') {
    //       pathSubmitClick();
    //     }
    //   },
    // });
    // visibleMessage.value = true;
    store.loginModeShow = true;
    return;
  }
  selectInit();
};
const okStep = async () => {
  try {
    if (loading.value) {
      return;
    }
    if (projectId.value) {
      loading.value = true;
      let res = await addExhibits(projectId.value, Exinfo.value.id, [Exinfo.value.id]);
      if (res.succeeded) {
        MessagePlugin.success('添加成功');
      }

      loading.value = false;
      visibleStep.value = false;
      projectId.value = null;
    } else {
      MessagePlugin.success('请选择展览');
      return;
    }
  } catch {
    loading.value = false;
  }
};
const closetables = (context?: any): void => {
  visibleStep.value = false;
};
// 跳转页面关闭展品弹窗
router.beforeEach((to, from, next) => {
  store.exhibitsInfoShow = false;
  next();
});
watch(
  () => store.exhibitsInfoShow,
  () => {
    showpieceid.value = store.exhibitsShowpieceid;
    parmas.id = store.exhibitsModuleId;
    flag.value = !flag.value;
    setTimeout(() => {
      init();
    }, 0);
  },
);
</script> 

<style scoped lang="less">
.remarks-style {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 1200px;
  max-width: 1200px;
  min-width: 1200px;
  height: 720px;
  max-height: 720px;
  background: transparent;
  transform: translateZ(0px);
}
.exhibits-name {
  min-height: 42px;
  color: #333;
  font-family: 'SourceHanSerifCN-Bold';
  font-size: 28px;
  line-height: 42px;
  flex-shrink: 0;
  text-align: center;
  margin-bottom: 40px;
}
.remarks-style-conetnt {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background-repeat: repeat;
  background-size: 100% 100%;
  padding: 54px 0;
  padding-left: 96px;
  padding-right: 66px;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 0px 20px 0px rgba(13, 11, 7, 0.43);

  .exhibits-describe {
    ::v-deep p {
      color: #322b25;
      text-align: justify;
      text-overflow: ellipsis;
      font-family: 'PingFang SC';
      font-size: 18px;
      line-height: 36px;
      text-indent: 0.2rem;
      margin-top: 20px;
    }
  }
  .beExhibits {
    width: 100%;
    .ExList {
      width: 100%;
      // height: 100%;
      // display: grid;
      // grid-template-columns: repeat(4, 1fr);
      // grid-gap: 24px;
      // justify-content: start;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .ExBox {
        width: calc(100% / 3 - 37px);
        height: 380px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;
        margin-right: 52px;
        &:nth-child(3n) {
          margin-right: 0;
        }
        // &:hover {
        // .cover-img {
        //   img {
        //     transform: scale(1.2);
        //   }
        // }
        // }
        .cover-img {
          width: 100%;
          height: 100%;
          overflow: hidden;
          margin-bottom: 18px;
          background: #fff;
          position: relative;
          &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: url(https://static.jiyi.show/free/style16/ExhibitsSmallBg.png) no-repeat center/100% 100%;
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: all 0.5s ease;
          }
        }
        .Extitle {
          // max-width: 254px;
          width: 100%;
          height: 32px;
          padding: 0 18px;
          text-align: center;
          font-family: 'SourceHanSerifCN';
          font-size: 18px;
          color: #333;
          line-height: 28px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex-shrink: 0;
        }
      }
    }
  }
}
.solidBorder-child {
  width: 1px;
  height: 100%;
  background: #cfc5b9;
  border-radius: 1px;
  opacity: 0.4;
}
::v-deep .scrollBar {
  width: 4px;
  height: 100%;
  background: #8b7f68;
  border-radius: 2px;
}
::v-deep .templatestyle1-scroll-box-tumb {
  align-items: center;
  justify-content: center;
  img {
    width: 24px;
    height: 16px;
  }
}
.close-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 35px;
  right: 35px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  .doorIcon {
    font-size: 32px;
    color: rgba(102, 62, 48, 1);
    line-height: 24px;
  }
  z-index: 30;
}

.jointly-title {
  width: 120px;
  margin: 40px auto;
  div {
    width: 100%;
    color: #333;
    font-family: 'SourceHanSerifCN-Bold';
    text-align: center;
    font-size: 20px;
    line-height: 30px;
  }
}

// 音频组件
// 展开音频描述按钮
::v-deep .right-top-play > .doorIcon {
  color: rgba(190, 169, 142, 1) !important;
}
::v-deep .right-top > .audio-name {
  font-size: 22px !important;
}
// 音频轨道按钮<t-slider>
::v-deep .t-slider__button {
  width: 8px;
  height: 8px;
  border: none;
  background-color: rgba(190, 169, 142, 1) !important;
  box-shadow: none;
}
// 已播放轨道
::v-deep .t-slider__track {
  background-color: rgba(190, 169, 142, 1) !important;
}
// 未播放轨道
::v-deep .t-slider__rail {
  background-color: rgba(51, 51, 51, 0.4) !important;
}
// 音频轨道按钮<van-slider>
::v-deep .van-slider__button {
  width: 8px;
  height: 8px;
  border: none;
  background-color: rgba(190, 169, 142, 1) !important;
}
// 已播放轨道<van-slider>
::v-deep .van-slider__bar {
  background-color: rgba(190, 169, 142, 1) !important;
}
// 未播放轨道<van-slider>
::v-deep .van-slider__rail {
  background-color: rgba(51, 51, 51, 0.4) !important;
}
.description-text {
  color: #333;
  text-align: justify;
  text-overflow: ellipsis;
  font-family: 'PingFang SC';
  font-size: 16px !important;
  line-height: 32px !important;
  text-indent: 2em !important;
  margin-top: 0.13889rem;
  opacity: 0.6;
  :deep(*) {
    color: #333;
    text-align: justify;
    text-overflow: ellipsis;
    font-family: 'PingFang SC';
    font-size: 16px !important;
    line-height: 32px !important;
    text-indent: 2em !important;
    margin-top: 0.13889rem;
  }
}
::v-deep .audeo-parent {
  border-radius: 8px;
  :deep(.van-slider__bar) {
    background: rgba(195, 181, 164, 1);
  }
  :deep(.van-slider__button) {
    background: rgba(195, 181, 164, 1);
  }
  :deep(.van-slider) {
    background: rgba(195, 181, 164, 0.22);
  }
  .left-box > .doorIcon {
    font-size: 40px;
  }
  .infoShow-box {
    padding-bottom: 0;
    padding-bottom: 20px;
  }
  .infoShow-box {
    color: #333 !important;
    text-align: justify;
    font-family: PingFangSC;
    font-size: 16px;
    line-height: 32px;
    margin-top: 0;
    padding-top: 26px;

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background: #e4dcc9;
      margin-bottom: 19px;
    }
  }
}
.select-box {
  :deep(.t-dialog) {
    padding: 0;
    background: transparent;
    border: none;
  }
  :deep(.t-dialog__header) {
    display: flex !important;
  }
  :deep(.t-dialog__footer) {
    display: flex !important;
  }
  :deep(.t-dialog) {
    max-height: auto;
    padding: 0;
    background: #fff !important;
    z-index: 9999 !important;
  }
  :deep(.t-dialog__header) {
    display: initial;
    display: flex;
  }
  :deep(.t-dialog__footer) {
    display: initial;
    display: flex;
    justify-content: flex-end;
  }
  :deep(.t-dialog__body) {
    padding: 12px 32px !important;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  :deep(.titles) {
    margin-bottom: 6px;
  }
}
.hw-dialog-box {
  display: flex;
  flex-direction: column;
}
</style>
